<!--
 * @Author: wangshuguang
 * @Date: 2022-02-17 10:49:37
 * @LastEditTime: 2022-08-24 15:43:00
 * @LastEditors: wangshuguang
 * @Description:  收入记录
-->
<template>
	<div class="common-container">
		<!-- 筛选条件 -->
		<el-card>
			<el-form ref="filterForm" :model="listQuery" class="demo-form-inline" label-width="100px">
				<el-row>
					<el-col :span="24" prop="date">
						<el-form-item label="时间">
							<el-radio-group v-model="filterDate" size="small" @change="dataRadioChange">
								<el-radio-button :label="1">今天</el-radio-button>
								<el-radio-button :label="2">昨天</el-radio-button>
								<el-radio-button :label="7">近7天</el-radio-button>
								<el-radio-button :label="15">近15天</el-radio-button>
								<el-radio-button :label="30">近30天</el-radio-button>
								<el-radio-button label="nowMonth">本月</el-radio-button>
							</el-radio-group>
							&nbsp;
							<el-date-picker
								v-model="filterTime"
								:clearable="false"
								format="yyyy-MM-dd HH:mm:ss"
								value-format="yyyy-MM-dd HH:mm:ss"
								:default-time="['00:00:00', '23:59:59']"
								size="small"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								@change="pickerChange"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="支付方式" prop="payType">
							<el-select v-model="listQuery.payType" clearable placeholder="请选择" size="small" class="width100">
								<el-option label="全部方式" value="" />
								<el-option label="微信" value="1" />
								<el-option label="余额" value="2" />
								<!-- <el-option label="支付宝" value="3" /> -->
								<!-- <el-option label="银联" value="4" /> -->
								<!-- <el-option label="现金" value="5" /> -->
								<!-- <el-option label="花呗" value="6" /> -->
								<!-- <el-option label="云闪付" value="7" /> -->
								<!-- <el-option label="礼品卡" value="9" /> -->
							</el-select>
						</el-form-item>
					</el-col>

					<div v-show="showMoreFilter">
						<el-col :span="12">
							<el-form-item label="支付状态" prop="payStatus">
								<el-select v-model="listQuery.payStatus" clearable placeholder="请选择" size="small" class="width100">
									<el-option label="全部状态" value="" />
									<el-option label="支付成功" value="100" />
									<el-option label="待支付" value="101" />
									<!-- <el-option label="支付中" value="102" /> -->
									<el-option label="支付失败" value="104" />
									<!-- <el-option label="主动取消" value="105" /> -->
									<el-option label="已退款" value="200" />
									<!-- <el-option label="退款中" value="201" /> -->
									<!-- <el-option label="退款失败" value="202" /> -->
									<el-option label="部分退款" value="205" />
									<!-- <el-option label="待结算" value="300" /> -->
									<!-- <el-option label="结算中" value="301" /> -->
									<!-- <el-option label="结算成功" value="302" /> -->
									<!-- <el-option label="结算失败" value="303" /> -->
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="支付门店" prop="shopId">
								<el-select v-model="listQuery.pubShopId" filterable size="small" class="width100" placeholder="可通过名称搜索" style="width:300px">
									<el-option v-for="(item, index) in $store.state.user.allManageShopFilterOptions" :key="index" :label="item.name" :value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="业务类型" prop="type">
								<el-select v-model="listQuery.type" clearable placeholder="请选择" size="small" class="width100">
									<el-option label="全部" value="" />
									<el-option label="储值" value="18" />
									<!-- <el-option label="会员开卡" value="34" /> -->
									<!-- <el-option label="商城" value="5" /> -->
									<!-- <el-option label="点餐" value="6" /> -->
									<!-- <el-option label="预订" value="7" /> -->
									<!-- <el-option label="赠送会员" value="9" /> -->
									<!-- <el-option label="会员续费" value="10" /> -->
									<!-- <el-option label="码牌支付" value="14" /> -->
									<!-- <el-option label="收款" value="15" /> -->
									<!-- <el-option label="插件返佣" value="16" /> -->
									<!-- <el-option label="预约" value="17" /> -->
									<el-option label="消费" value="5" />
								</el-select>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12">
              <el-form-item label="业务来源" prop="source">
                <el-select v-model="listQuery.source" clearable placeholder="请选择" size="small" class="width100">
                  <el-option label="全部" value="" />
                  <el-option label="微信会员小程序" value="1" />
                  <el-option label="聚合支付" value="9" />
                  <el-option label="商户app" value="10" />
                  <el-option label="POS机app" value="4" />
                </el-select>
              </el-form-item>
            </el-col> -->
						<!-- <el-col :span="12">
              <el-form-item label="使用插件" prop="pluginCode">
                <el-select v-model="listQuery.pluginCode" clearable placeholder="请选择" size="small" class="width100">
                  <el-option label="全部" value="" />
                  <el-option label="未使用插件" value="0" />
                  <el-option label="超级会员" value="supermember" />
                  <el-option label="储值AI" value="2" />
                  <el-option label="满减满折" value="discount" />
                </el-select>
              </el-form-item>
            </el-col> -->
						<el-col :span="12">
							<el-form-item label="订单金额区间" prop="beginAmt">
								<el-input v-model="listQuery.beginAmt" placeholder="最低价" type="number" style="width:100px" :controls="false" size="small" />
								<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
								<el-input v-model="listQuery.endAmt" placeholder="最高价" type="number" style="width:100px" :controls="false" size="small" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="用户" prop="customerInfo">
								<el-input v-model="listQuery.customerInfo" clearable placeholder=" 请输入用户昵称/手机号" size="small" class="width100" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="支付单号" prop="paymentNo">
								<el-input v-model="listQuery.paymentNo" clearable placeholder="请输入" size="small" class="width100" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="业务单号" prop="orderNo">
								<el-input v-model="listQuery.orderNo" clearable placeholder="请输入" size="small" class="width100" />
							</el-form-item>
						</el-col>
					</div>
					<el-col :span="12">
						<el-form-item>
							<el-button type="primary" round size="small" @click="fetchData">查询</el-button>
							<el-button type="primary" round size="small" @click="resetForm('filterForm')">重置</el-button>
							<el-button type="text" round size="small" @click="showMoreFilter = !showMoreFilter">{{ showMoreFilter ? '收起高级选项' : '展开高级选项' }}</el-button>
							<!-- <el-button type="text" round size="small" @click="downFile">导出为excel</el-button> -->
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<!-- 数据看板 -->
		<!-- <div class="dataCard">
      <el-card>
        <div class="title">订单金额和笔数</div>
        <div class="money">{{ dataCard.totAmt }}元</div>
        <div class="money">{{ dataCard.totNum }}笔</div>
      </el-card>
      <el-card>
        <div class="title">退款金额和笔数</div>
        <div class="money">{{ dataCard.refundAmt }}元</div>
        <div class="money">{{ dataCard.refundNum }}笔</div>
      </el-card>
      <el-card>
        <div class="title">实收金额
          <el-tooltip class="item" effect="light" content="实收金额包括礼品卡、余额、线上交易" placement="right">
            <i class="el-icon-question" style="color:#ffb72f" />
          </el-tooltip>
        </div>
        <div class="money">{{ dataCard.realAmt }}元</div>
        <div class="content">
          <div>礼品卡支付 {{ dataCard.giftCardAmt||0 }} 元</div>
          <div style="margin:5px 0;">余额支付 {{ dataCard.balanceAmt }} 元</div>
          <div>线上交易 {{ dataCard.onlineAmt }} 元</div>
        </div>
      </el-card>
    </div> -->
		<div class="dataList">
			<el-table size="medium" :data="list" border>
				<el-table-column prop="roleTypeZh" align="center" label="序号">
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column prop="paymentMethodZh" align="center" label="支付方式" />
				<el-table-column prop="paymentNo" align="center" label="支付单号" />
				<el-table-column prop="typeZh" align="center" label="业务类型" />
				<!-- <el-table-column prop="sourceZh" align="center" label="业务来源" /> -->
				<el-table-column prop="orderNo" align="center" label="业务单号" />
				<!-- 交易中心进入时  展示会员信息 -->
				<el-table-column prop="customerInfo" align="center" label="用户信息" width="150">
					<template slot-scope="scope">
						<div>{{ scope.row.customerName }}</div>
						<div>{{ scope.row.memberPhone }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="pubShopName" align="center" label="支付门店"  width="200"/>
				<!-- <el-table-column prop="pluginCodeZh" align="center" label="使用插件" /> -->
				<el-table-column prop="totalFee" align="center" label="订单金额/元" />
				<el-table-column prop="refundAmt" align="center" label="退款金额/元" />
				<el-table-column prop="realAmt" align="center" label="实收金额/元" />
				<el-table-column prop="paymentStatusZh" align="center" label="支付状态" />
				<el-table-column prop="paymentTime" align="center" label="发起支付时间" />
				<el-table-column prop="remark" align="center" label="备注" width="200" />
				<el-table-column prop="statisticalTime" align="center" label="操作" width="100">
					<template slot-scope="scope">
						<el-button type="text" @click="viewData(scope.row)">详情</el-button>
						<!-- 退款按钮展示条件： 会员详情页面 & 支付状态不是【待支付】 & 业务类型为【商城，预定】 && 可退款有值 -->
						<el-button
							v-if="
								sourcePage == 'vipDetail' && [100, 205].includes(scope.row.paymentStatus) && [5, 7, 6, 14, 15, 17].includes(scope.row.type) && scope.row.canRefAmt
							"
							type="text"
							@click="refundOrder(scope.row)"
						>
							退款
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination-container">
				<el-pagination
					:current-page.sync="listQuery.pageNum"
					:page-size="listQuery.pageSize"
					:total="total"
					layout="total, prev, pager, next"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</div>

		<!-- 退款弹框 -->
		<RefundDialog v-model="refundVisible" :info-config="infoConfig" @sucClose="sucClose" />
		<!-- 详情弹框 -->
		<el-dialog title="支付订单详情" :visible.sync="orderDetailVisible" width="70%" :before-close="handleClose">
			<IncomeHisDetail v-if="orderDetailVisible" :info-config="infoConfig" @sucClose="sucClose" />
		</el-dialog>
	</div>
</template>

<script>
import { qryIncomeRecord, exportMercIncome } from '@/api/payCenter';
import { qryPubIncomeRecord } from '@/api/payCenterPub';
import { mapGetters } from 'vuex';
import { dateFtt, removePropertyOfNull } from '@/utils';
import { getFilterFormPastTime } from '@/utils/format';

import IncomeHisDetail from '../components/IncomeHisDetail.vue';
import RefundDialog from '../components/RefundDialog.vue';

export default {
	components: { IncomeHisDetail, RefundDialog },
	props: {
		vipDetail: {},
		// sourcePage来源页面  交易中心-payCenter  会员详情-vipDetail
		sourcePage: {
			default: 'payCenter'
		}
	},
	data() {
		return {
			orderDetailVisible: false,
			showMoreFilter: false,
			infoVisible: false,
			refundVisible: false,
			infoConfig: {},
			form: {},
			dataCard: {},
			scope: 0,
			total: 0,
			filterDate: 1,
			filterTime: [],
			listQuery: {
				pageNum: 1,
				pageSize: 10,
				payType: '',
				payStatus: '',
				paymentNo: '',
				pluginCode: '',
				orderNo: '',
				type: '',
				pubShopId: '',
				beginAmt: '',
				source: '',
				endAmt: '',
				beginTime: '',
				endTime: '',
				userName: '',
				customerInfo: ''
			},
			list: [],
			customerId: this.sourcePage === 'vipDetail' ? this.vipDetail.customerId : null
		};
	},
	computed: {
		...mapGetters(['businessInfo'])
	},
	async mounted() {
		// 设置时间查询默认值
		let filtrList = ['cancelTable'];
		let { query } = this.$route;
		if (query?.orderNo && filtrList.indexOf(query?.from) != -1) {
			qryPubIncomeRecord({ orderNo: query.orderNo, customerId: this.customerId }).then(res => {
				if (res.code === 0) {
					const { list, total } = res.data.pageList;
					this.infoConfig = list[0];
					this.orderDetailVisible = true;
				}
			});
			return;
		}
		this.filterDate = 1;
		this.dataRadioChange(1);
		console.log('$store.state.user.allManageShopFilterOptions-----',this.$store.state.user.allManageShopFilterOptions)
	},
	methods: {
		refundOrder(item) {
			this.infoConfig = item;
			this.refundVisible = true;
		},
		sucClose() {
			this.orderDetailVisible = false;
			this.refundVisible = false;
			this.fetchData();
		},
		viewData(data) {
			this.infoConfig = data;
			this.orderDetailVisible = true;
		},
		pickerChange(val) {
			// 时间筛选条件切换
			console.log('pickerChange', val);
			this.listQuery.beginTime = val[0];
			this.listQuery.endTime = val[1];
			this.filterDate = '';
			this.fetchData();
		},
		async dataRadioChange(val) {
			// 时间tab切换
			let dateArr = [];
			if (val == 'nowMonth') {
				dateArr = await getFilterFormPastTime('nowMonth');
			} else if (val == 2) {
				dateArr = await getFilterFormPastTime('yesterday');
			} else {
				dateArr = await getFilterFormPastTime(val);
			}
			this.listQuery.beginTime = dateArr[0];
			this.listQuery.endTime = dateArr[1];
			console.log('val', val, dateArr);
			this.filterTime = [];
			this.fetchData();
		},
		// 重置
		resetForm(formName) {
			this.filterDate = 1;
			this.listQuery.endAmt = '';
			this.listQuery.beginAmt = '';
			this.listQuery.pubShopId = '';
			this.$refs[formName].resetFields();
			this.dataRadioChange(1);
		},
		downFile() {
			const obj = {
				...this.listQuery,
				memberId: this.$route.query.memberId || ''
			};
			exportMercIncome(removePropertyOfNull(obj)).then(res => {
				console.log('res', res);
				if (res.code === 0) {
					this.$alert('数据导出中，请稍后到数据下载中心进行下载', '提示', {
						confirmButtonText: '确定',
						center: true,
						type: 'success',
						callback: action => {}
					});
				}
			});
		},
		fetchData() {
			const obj = {
				...this.listQuery,
				memberId: this.$route.query.memberId || '',
				customerId: this.customerId
			};
			qryPubIncomeRecord(removePropertyOfNull(obj)).then(res => {
				if (res.code === 0) {
					const { list, total } = res.data.pageList;
					console.log('res', res);
					this.list = list;
					this.total = total;
					this.dataCard = {
						...res.data,
						pageList: null
					};
				}
			});
		},
		handleSizeChange(val) {
			this.listQuery.pageSize = val;
			this.fetchData();
		},
		handleCurrentChange(val) {
			this.listQuery.pageNum = val;
			this.fetchData();
		},
		handleClose() {
			let filtrList = ['cancelTable'];
			let { query } = this.$route;
			if (query?.orderNo && filtrList.indexOf(query?.from) != -1) {
				window.close();
				return;
			}
			this.orderDetailVisible = false;
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.labelText {
	color: rgb(115, 115, 115);
	font-size: 12px;
}

.common-container {
	// background: #fff;
	border-radius: 5px;
	padding: 20px;
	.dataCard {
		display: flex;
		/deep/.el-card {
			margin: 10px 10px 10px 0;
			min-width: 200px;
			.el-card__body {
				padding: 10px 20px;
				.title {
					border-left: 3px solid #ffb72f;
					padding-left: 5px;
				}
				.money {
					font-size: 20px;
					margin-top: 15px;
				}
				.content {
					margin-top: 15px;
					font-size: 12px;
				}
			}
		}
	}
	.dataList {
		background: #fff;
	}
	/deep/.el-date-editor .el-range-separator{
		width: 7%;
	}
}
</style>
